<template>
    <div class="electricContainer">
        <!--设备的名字-->
        <div class="eleName" @click="setAllOption">
            <img alt="电能表" src="../assets/IOT-电能表-001.png">
        </div>
        <!--设备的实时数据-->
        <div class="eleData">
            <!--左半边数据-->
            <ul @click="setOption">
                <li name="电压">
                    <div class="left">
                        <span class="dataName">实时电压:</span>
                        <span class="data" v-text="yData.voltage[yData.voltage.length]"></span>
                    </div>
                    <div class="right">
                        <chart :id="'电压'+id" :data="yData.voltage" :mark-line="option[0]"></chart>
                    </div>
                </li>
                <li name="电流">
                    <div class="left">
                        <span class="dataName">实时电流:</span>
                        <span class="data">220</span>
                    </div>
                    <div class="right">
                        <chart :id="'电流'+id" :data="yData.electricCurrent" :mark-line="option[1]"></chart>
                    </div>
                </li>
                <li>
                    <div class="left">
                        <span class="dataName">有功功率:</span>
                        <span class="data">220</span>
                    </div>
                    <div class="right">
                        <chart :id="'有功功率' + id" :data="yData.activePower" :mark-line="option[2]"></chart>
                    </div>
                </li>
            </ul>
            <!--右半边数据 -->
            <ul @click="setOption">
                <li>
                    <div class="left">
                        <span class="dataName">无功功率:</span>
                        <span class="data">220</span>
                    </div>
                    <div class="right">
                        <chart :id="'无功功率'+id" :data="yData.reactivePower" :mark-line="option[3]"></chart>
                    </div>
                </li>
                <li>
                    <div class="left">
                        <span class="dataName">电度:</span>
                        <span class="data">220</span>
                    </div>
                    <div class="right">
                        <chart :id="'电度'+id" :data="yData.electricDegree" :mark-line="option[4]"></chart>
                    </div>
                </li>
                <li>
                    <div class="left">
                        <span class="dataName">总电度:</span>
                        <span class="data">220</span>
                    </div>
                    <div class="right">
                        <chart :id="'总电度'+id" :data="yData.totalDegree"></chart>
                    </div>
                </li>
            </ul>
        </div>
        <!--<chart :id="id"></chart>-->
    </div>
</template>
<script>
import chart from '@/components/chart';
import config from '@/config';

export default {
    name: 'electric',
    data() {
        return {
            optionList: config.optionList.electricEnergyMeter,
            sendOption: []
        };
    },
    props: {
        id: { type: Number, require: true },
        name: { type: String, require: true },
        option: {
            type: Array,
            default: () => {
                return [];
            }
        },
        yData: {
            type: Object, require: true
        }
    },
    components: {
        chart
    },
    methods: {
        //设置所有的属性
        setAllOption() {
            this.$emit('total', this.optionList);
        },
        //设置单个属性
        setOption(e) {
            // console.log(e.target.innerText.replace(':', ''));
            this.$emit('one', e.target.innerText.replace(':', ''));
        }
    }
};
</script>
<style lang="less" scoped src="../style/electric.less">
</style>
